<template>
  <div id="sun"></div>
</template>

<script>
import * as echarts from "echarts";
import data from "../../assets/json/旭日图数据.json";

export default {
  name: "Sun",
  data() {
    return {
      num: 0,
      height: null,
    };
  },
  methods: {},
  mounted() {
    var chartDom = document.getElementById("sun");
    this.height = chartDom.getBoundingClientRect().height;
    var myChart = echarts.init(chartDom);
    var option;

    const colors = ["#FFAE57", "#FF7853", "#EA5151", "#CC3F57", "#9A2555"];
    const bgColor = "#2E2733";
    for (let j = 0; j < data.length; j++) {
      let year = data[j].children;
      for (let i = 0; i < year.length; i++) {
        let province = year[i].children;
        for (let k = 0; k < province.length; k++) {
          province[k].label = {
            color: "#000",
          };
          if (province[k].children) {
            province[k].children.forEach(function (city) {
              city.value = 5;
              city.itemStyle = {
                color: "#00ff00",
              };
              city.label = {
                color: "#737cbd",
              };
            });
          }
        }
        year[i].itemStyle = {
          color: data[j].itemStyle.color,
        };
      }
    }
    option = {
      color: colors,
      tooltip: {
        triggerOn: "click",
        formatter: (arg) => {
          console.log(arg.data);
        },
      },
      series: [
        {
          type: "sunburst",
          data: data,
          sort: function (a, b) {
            if (a.depth === 1) {
              return b.getValue() - a.getValue();
            } else {
              return a.dataIndex - b.dataIndex;
            }
          },
          label: {
            rotate: "radial",
            color: bgColor,
          },
          itemStyle: {
            borderColor: bgColor,
            borderWidth: 1,
          },
          levels: [
            {},
            {
              r0: 0,
              r: this.height / 6,
            },
            {
              r0: this.height / 6,
              r: this.height / 3.5,
            },
            {
              r0: this.height / 3.5,
              r: this.height / 2.5,
              itemStyle: {
                color: "transparent",
              },
              label: {
                fontSize: 7,
                fontWeight: "bold",
              },
            },
            {
              r0: this.height / 2.5,
              r: this.height / 2.5,
              itemStyle: {
                shadowBlur: 200,
                shadowColor: colors[0],
              },
              label: {
                position: "outside",
                fontSize: 9,
                fontWeight: "bold",
              },
            },
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

<style scoped>
</style>
